<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
  <head>
  	<c:set value="${pageContext.request.contextPath}" var="basePath"></c:set>
	<jsp:include page="include/head.jsp"></jsp:include>
	<jsp:include page="include/js.jsp"></jsp:include>
	
	<!-- Sketchpad Libs -->
	<jsp:include page="include/libs.jsp"></jsp:include>
	
	<!-- CoupledObjectServer -->
	<script src="${cosServer}/resources/js/sync_blocking.js"></script>
	
	<!-- Sketchpad -->
	<jsp:include page="include/sketchpadLib.jsp"></jsp:include>
	
  </head>
  <body>
  
    <div id="login-data">
    	Session:&nbsp;<span id="user_name">${user.name} ${user.lastname}</span>
    	<a id="icon-signout" href="${basePath}/logout"><i class="icon-signout"></i></a>
    </div>
    
    <div id="container" class="container">
        <div id="row" class="row panel">
            <legend>
            	<small>${subjectVersion.name} </small>
            	<small>- ${activity.name}</small>
            	<br/>
            	Upload Slides
           	</legend>
            <div>
            	<form action="${basePath}/uploadMany" 
            		method="POST" 
            		id="import-slides-form" 
            		enctype="multipart/form-data" 
            		target="upload-files-iframe">
					<fieldset>
						<label>Select slides image files to import. The slides will be sorted by their name and added to the activity.</label>
						<input type="file" 
							id="files" 
							name="files[]" 
							multiple="multiple"
							accept="image/jpeg,image/gif,image/png" 
							style="width: 100%;"/>
						<div style="text-align: center;">
							<img id="import-loading-icon" src="${basePath}/resources/images/loading_by_12jaypee34.gif"/>
						</div>
					</fieldset>
					<div>
						<button type="submit" class="btn btn-primary" id="upload-btn">Upload</button>
						<button type="button" class="btn btn-default" onclick="window.location = '${basePath}/activitySelection/${subjectVersion.id}'">Cancel</button>
					</div>
				</form>
            </div>
        </div>
    </div>
    
	<iframe id="upload-files-iframe" name="upload-files-iframe" onload="handleUploadIFrameLoaded();" style="display: none;"></iframe>
    
    <script>
	    handleUploadIFrameLoaded = function() {
	    	var html = $(document.getElementById('upload-files-iframe').contentWindow.document.body.innerHTML).html();
	    	if ( html != null && html != '' ) {
	    		var response = JSON.parse(html);
	    		
	    		var sketchpad = Skt.sketchpad;
	    		
	    		for ( var i = 0; i < response.length; ++i ) {
	    			var slide = response[i];   	
	    			
	    			$.ajax({
	    				url: sketchpad.getBasePath() + "/app/newSlide",
	    				type: "POST",
	    				async: false,
	    				dataType: "json",
	    				data: {
	    					activity_id: sketchpad.getActivity().id,
        					type: Skt.SlideType.SCREEN
	    				},
	    				success: function(response) {
	    					sketchpad.addRoom(Number(response.id), response.type, response.author, null, null);
        					var room = sketchpad.findRoomById(Number(response.id));
        					room.addCommand("setBackground", {background: sketchpad.getBasePath() + '/files/' + slide.id + '/' + slide.originalName});
	    				}
	    			});
	    			
	    		}
	    		
	    		$("#import-loading-icon").hide();
	    		window.location = '${basePath}/activitySelection/${subjectVersion.id}?alert=success&alertdesc=The slides were successfully uploaded';
	    	}
	    };
    	
		$(function() {
			
			$("#import-loading-icon").hide();
			$("#import-slides-form").submit(function() {
				$("#import-loading-icon").show();
				return true;
			});
			
			var user = {
					id : "${user.id}",
					name : "${user.name}",
					lastname : "${user.lastname}",
					username : "${user.username}",
					type : "${user.type}"
				};
				
				var subjectVersion = {
					id: "${subjectVersion.id}",
					name: "${subjectVersion.name}"
				};
				
				var activity = {
					id: "${activity.id}",
					name: "${activity.name}"
				};
				
				var options = {
					useUI: false,
					coupling: {
						enabled: true,
						cosServer: '${cosServer}/',
						activityAdapter: null,
						personalAdapter: null
					}
				};
				
				if ( options.coupling.enabled ) {
					options.coupling.activityAdapter = new ClientAdapter(options.coupling.cosServer);
					options.coupling.activityAdapter.joinSession("activity" + activity.id);
					
					options.coupling.personalAdapter = new ClientAdapter(options.coupling.cosServer);
					options.coupling.personalAdapter.joinSession("user" + user.id + "-activity" + activity.id);
				}
				
				Skt.sketchpad = new Skt.SketchpadController(
					"${basePath}",
					subjectVersion,
					activity,
					user,
					options
				);
				
				Skt.Init.init(Skt.sketchpad);
				
				if ( options.coupling.enabled ) {
					options.coupling.activityAdapter.start(0);
// 					options.coupling.personalAdapter.start(0);
				}
			
		});
		
    </script>
    
  </body>
</html>
